<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="" />
    <meta name="keywords" content=" table demo page" />
    <title>Table Starter Page | SAP Fundamentals</title>
    <link
      href="https://unpkg.com/@sap-theming/theming-base-content@11.1.35/content/Base/baseLib/sap_fiori_3/css_variables.css"
      rel="stylesheet"
    />
    <link
      href="/vendor/fundamental-styles/dist/fundamental-styles.css"
      rel="stylesheet"
    />
    <link href="../../../styles/styles.css" rel="stylesheet" />
    <script src="/vendor/luigi-client/luigi-client.js"></script>
  </head>

  <body>
    <div>
      <div class="fd-page">
        <header class="fd-page__header">
          <div class="fd-action-bar">
            <div class="fd-action-bar__header">
              <h3 class="fd-action-bar__title">
                Table
              </h3>
              <div class="fd-action-bar__actions">
                <button class="fd-button fd-button--compact ">
                  <span class="fd-button__text">Add New Item</span>
                  <i class="sap-icon--add"></i>
                </button>
              </div>
            </div>
            <p class="fd-action-bar__description">
              Optional page intro lorem ipsum dolor
            </p>
          </div>
        </header>

        <div class="fd-page__content">
          <section class="fd-section">
            <div class="fd-layout-panel">
              <div class="fd-layout-panel__header">
                <h3 class="fd-layout-panel__title">
                  Items (1180)
                </h3>
                <div class="fd-layout-panel__actions">
                  <div class="fd-popover">
                    <div class="fd-popover__control">
                      <button
                        class="fd-button fd-button--compact"
                        aria-label="Newest"
                        aria-expanded="false"
                        aria-controls="tf5QS710"
                        aria-haspopup="true"
                      >
                        <span class="fd-button__text">Newest</span>
                        <i class="sap-icon--sort"></i>
                      </button>
                    </div>
                    <div
                      class="fd-popover__body fd-popover__body--right fd-popover__body--no-arrow"
                      aria-hidden="true"
                      id="tf5QS710"
                    >
                      <nav class="fd-menu">
                        <ul class="fd-menu__list">
                          <li class="fd-menu__item">
                            <a href="#" class="fd-menu__link"
                              ><span class="fd-menu__title">Option 1</span></a
                            >
                          </li>
                          <li class="fd-menu__item">
                            <a href="#" class="fd-menu__link"
                              ><span class="fd-menu__title">Option 2</span></a
                            >
                          </li>
                          <li class="fd-menu__item">
                            <a href="#" class="fd-menu__link"
                              ><span class="fd-menu__title">Option 3</span></a
                            >
                          </li>
                        </ul>
                      </nav>
                    </div>
                  </div>
                  <button
                    class="fd-button fd-button--compact"
                    aria-controls="yQUnd326"
                    aria-haspopup="true"
                    aria-expanded="false"
                    aria-label="Filter"
                  >
                    <span class="fd-button__text">Filter</span>
                    <i class="sap-icon--filter"></i>
                  </button>
                  <div class="fd-segmented-button" role="group" aria-label="Show as">
                    <button class="fd-button fd-button--compact">
                      <i class=" sap-icon--grid"></i>
                    </button>
                    <button class="fd-button fd-button--compact" aria-pressed="true">
                      <i class="sap-icon--list"></i>
                    </button>
                  </div>
                </div>
              </div>
              <div class="fd-layout-panel__filters" aria-hidden="true" id="yQUnd326">
                <div class="fd-popover">
                  <div class="fd-popover__control">
                    <button
                      class="fd-button fd-button--compact fd-dropdown__control "
                      aria-label="Color"
                      aria-expanded="false"
                      aria-controls="CVXoG110"
                      aria-haspopup="true"
                    >
                      <span class="fd-button__text">Color</span>
                    </button>
                  </div>
                  <div
                    class="fd-popover__body fd-popover__body--left fd-popover__body--no-arrow"
                    aria-hidden="true"
                    id="CVXoG110"
                  >
                    <nav class="fd-menu">
                      <ul class="fd-menu__list">
                        <li class="fd-menu__item">
                          <a href="#" class="fd-menu__link"
                            ><span class="fd-menu__title">Option 1</span></a
                          >
                        </li>
                        <li class="fd-menu__item">
                          <a href="#" class="fd-menu__link"
                            ><span class="fd-menu__title">Option 2</span></a
                          >
                        </li>
                        <li class="fd-menu__item">
                          <a href="#" class="fd-menu__link"
                            ><span class="fd-menu__title">Option 3</span></a
                          >
                        </li>
                      </ul>
                    </nav>
                  </div>
                </div>
                <div class="fd-popover">
                  <div class="fd-popover__control">
                    <button
                      class="fd-dropdown__control fd-button fd-button--compact"
                      aria-label="Size"
                      aria-expanded="false"
                      aria-controls="p7mxb212"
                      aria-haspopup="true"
                    >
                      Size
                    </button>
                  </div>
                  <div
                    class="fd-popover__body fd-popover__body--left fd-popover__body--no-arrow"
                    aria-hidden="true"
                    id="p7mxb212"
                  >
                    <nav class="fd-menu">
                      <ul class="fd-menu__list">
                        <li class="fd-menu__item">
                          <a href="#" class="fd-menu__link"
                            ><span class="fd-menu__title">Option 1</span></a
                          >
                        </li>
                        <li class="fd-menu__item">
                          <a href="#" class="fd-menu__link"
                            ><span class="fd-menu__title">Option 2</span></a
                          >
                        </li>
                        <li class="fd-menu__item">
                          <a href="#" class="fd-menu__link"
                            ><span class="fd-menu__title">Option 3</span></a
                          >
                        </li>
                      </ul>
                    </nav>
                  </div>
                </div>
              </div>
              <div class="fd-layout-panel__filters" aria-hidden="false">
                <span class="fd-token" role="button">
                  <span class="fd-token__text">Bibendum</span>
                  <button class="fd-token__close" tabindex="-1"></button>
                </span>
                <span class="fd-token" role="button">
                  <span class="fd-token__text">Bibendum</span>
                  <button class="fd-token__close" tabindex="-1"></button>
                </span>
                <span class="fd-token" role="button">
                  <span class="fd-token__text">Bibendum</span>
                  <button class="fd-token__close" tabindex="-1"></button>
                </span>
                <span class="fd-token" role="button">
                  <span class="fd-token__text">Bibendum</span>
                  <button class="fd-token__close" tabindex="-1"></button>
                </span>
                <span class="fd-token" role="button">
                  <span class="fd-token__text">Bibendum</span>
                  <button class="fd-token__close" tabindex="-1"></button>
                </span>
                <button class="fd-button fd-button--compact">Clear All</button>
              </div>
              <div class="fd-layout-panel__body fd-layout-panel__body--bleed">
                <table class="fd-table">
                  <thead class="fd-table__header">
                    <tr class="fd-table__row">
                      <th class="fd-table__cell"></th>
                      <th class="fd-table__cell">Column Header</th>
                      <th class="fd-table__cell">Column Header</th>
                      <th class="fd-table__cell">Column Header</th>
                      <th class="fd-table__cell">Column Header</th>
                    </tr>
                  </thead>
                  <tbody class="fd-table__body">
                    <tr class="fd-table__row" aria-selected="true">
                      <td class="fd-table__cell fd-table__cell--checkbox">
                        <input
                          aria-label="checkbox"
                          type="checkbox"
                          class="fd-checkbox"
                          id="1"
                          checked
                        />
                        <label class="fd-checkbox__label" for="1"></label>
                      </td>
                      <td class="fd-table__cell">
                        <a class="fd-has-font-weight-semi">user.name@email.com</a>
                      </td>
                      <td class="fd-table__cell">First Name</td>
                      <td class="fd-table__cell">Last Name</td>
                      <td class="fd-table__cell">01/26/17</td>
                    </tr>
                    <tr class="fd-table__row">
                      <td class="fd-table__cell fd-table__cell--checkbox">
                        <input
                          aria-label="checkbox"
                          type="checkbox"
                          class="fd-checkbox"
                          id="2"
                        />
                        <label class="fd-checkbox__label" for="2"></label>
                      </td>
                      <td class="fd-table__cell">
                        <a class="fd-has-font-weight-semi">user.name@email.com</a>
                      </td>
                      <td class="fd-table__cell">First Name</td>
                      <td class="fd-table__cell">Last Name</td>
                      <td class="fd-table__cell">01/26/17</td>
                    </tr>
                    <tr class="fd-table__row">
                      <td class="fd-table__cell fd-table__cell--checkbox">
                        <input
                          aria-label="checkbox"
                          type="checkbox"
                          class="fd-checkbox"
                          id="3"
                        />
                        <label class="fd-checkbox__label" for="3"></label>
                      </td>
                      <td class="fd-table__cell">
                        <a class="fd-has-font-weight-semi">user.name@email.com</a>
                      </td>
                      <td class="fd-table__cell">First Name</td>
                      <td class="fd-table__cell">Last Name</td>
                      <td class="fd-table__cell">01/26/17</td>
                    </tr>
                    <tr class="fd-table__row">
                      <td class="fd-table__cell fd-table__cell--checkbox">
                        <input
                          aria-label="checkbox"
                          type="checkbox"
                          class="fd-checkbox"
                          id="4"
                        />
                        <label class="fd-checkbox__label" for="4"></label>
                      </td>
                      <td class="fd-table__cell">
                        <a class="fd-has-font-weight-semi">user.name@email.com</a>
                      </td>
                      <td class="fd-table__cell">First Name</td>
                      <td class="fd-table__cell">Last Name</td>
                      <td class="fd-table__cell">01/26/17</td>
                    </tr>
                    <tr class="fd-table__row">
                      <td class="fd-table__cell fd-table__cell--checkbox">
                        <input
                          aria-label="checkbox"
                          type="checkbox"
                          class="fd-checkbox"
                          id="5"
                        />
                        <label class="fd-checkbox__label" for="5"></label>
                      </td>
                      <td class="fd-table__cell">
                        <a class="fd-has-font-weight-semi">user.name@email.com</a>
                      </td>
                      <td class="fd-table__cell">First Name</td>
                      <td class="fd-table__cell">Last Name</td>
                      <td class="fd-table__cell">01/26/17</td>
                    </tr>
                    <tr class="fd-table__row">
                      <td class="fd-table__cell fd-table__cell--checkbox">
                        <input
                          aria-label="checkbox"
                          type="checkbox"
                          class="fd-checkbox"
                          id="6"
                        />
                        <label class="fd-checkbox__label" for="6"></label>
                      </td>
                      <td class="fd-table__cell">
                        <a class="fd-has-font-weight-semi">user.name@email.com</a>
                      </td>
                      <td class="fd-table__cell">First Name</td>
                      <td class="fd-table__cell">Last Name</td>
                      <td class="fd-table__cell">01/26/17</td>
                    </tr>
                    <tr class="fd-table__row">
                      <td class="fd-table__cell fd-table__cell--checkbox">
                        <input
                          aria-label="checkbox"
                          type="checkbox"
                          class="fd-checkbox"
                          id="7"
                        />
                        <label class="fd-checkbox__label" for="7"></label>
                      </td>
                      <td class="fd-table__cell">
                        <a class="fd-has-font-weight-semi">user.name@email.com</a>
                      </td>
                      <td class="fd-table__cell">First Name</td>
                      <td class="fd-table__cell">Last Name</td>
                      <td class="fd-table__cell">01/26/17</td>
                    </tr>
                    <tr class="fd-table__row">
                      <td class="fd-table__cell fd-table__cell--checkbox">
                        <input
                          aria-label="checkbox"
                          type="checkbox"
                          class="fd-checkbox"
                          id="8"
                        />
                        <label class="fd-checkbox__label" for="8"></label>
                      </td>
                      <td class="fd-table__cell">
                        <a class="fd-has-font-weight-semi">user.name@email.com</a>
                      </td>
                      <td class="fd-table__cell">First Name</td>
                      <td class="fd-table__cell">Last Name</td>
                      <td class="fd-table__cell">01/26/17</td>
                    </tr>
                    <tr class="fd-table__row">
                      <td class="fd-table__cell fd-table__cell--checkbox">
                        <input
                          aria-label="checkbox"
                          type="checkbox"
                          class="fd-checkbox"
                          id="9"
                        />
                        <label class="fd-checkbox__label" for="9"></label>
                      </td>
                      <td class="fd-table__cell">
                        <a class="fd-has-font-weight-semi">user.name@email.com</a>
                      </td>
                      <td class="fd-table__cell">First Name</td>
                      <td class="fd-table__cell">Last Name</td>
                      <td class="fd-table__cell">01/26/17</td>
                    </tr>
                    <tr class="fd-table__row">
                      <td class="fd-table__cell fd-table__cell--checkbox">
                        <input
                          aria-label="checkbox"
                          type="checkbox"
                          class="fd-checkbox"
                          id="10"
                        />
                        <label class="fd-checkbox__label" for="10"></label>
                      </td>
                      <td class="fd-table__cell">
                        <a class="fd-has-font-weight-semi">user.name@email.com</a>
                      </td>
                      <td class="fd-table__cell">First Name</td>
                      <td class="fd-table__cell">Last Name</td>
                      <td class="fd-table__cell">01/26/17</td>
                    </tr>
                    <tr class="fd-table__row">
                      <td class="fd-table__cell fd-table__cell--checkbox">
                        <input
                          aria-label="checkbox"
                          type="checkbox"
                          class="fd-checkbox"
                          id="11"
                        />
                        <label class="fd-checkbox__label" for="11"></label>
                      </td>
                      <td class="fd-table__cell">
                        <a class="fd-has-font-weight-semi">user.name@email.com</a>
                      </td>
                      <td class="fd-table__cell">First Name</td>
                      <td class="fd-table__cell">Last Name</td>
                      <td class="fd-table__cell">01/26/17</td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <div class="fd-layout-panel__footer">
                <div class="fd-pagination">
                  <span class="fd-pagination__total">1180 items</span>
                  <nav class="fd-pagination__nav">
                    <a
                      href="#"
                      class="fd-pagination__link fd-pagination__link--previous"
                      aria-label="Previous"
                      aria-disabled="false"
                    ></a>
                    <a href="#" class="fd-pagination__link">1</a>
                    <span
                      class="fd-pagination__link fd-pagination__link--more"
                      role="presentation"
                    ></span>
                    <a href="#" class="fd-pagination__link">24</a>
                    <a href="#" class="fd-pagination__link is-selected">25</a>
                    <a href="#" class="fd-pagination__link">26</a>
                    <span
                      class="fd-pagination__link fd-pagination__link--more"
                      role="presentation"
                    ></span>
                    <a href="#" class="fd-pagination__link">59</a>
                    <a
                      href="#"
                      class="fd-pagination__link fd-pagination__link--next"
                      aria-label="Next"
                      aria-disabled="false"
                    ></a>
                  </nav>
                </div>
              </div>
            </div>
          </section>
        </div>
      </div>
    </div>
    <script type="module">
      import setTheme from '../../../themeHelper.js';
      function updateFn() {
        setTheme();
      }

      LuigiClient.addInitListener(updateFn);
      LuigiClient.addContextUpdateListener(updateFn);
    </script>
    <script type="text/javascript">
      (function() {
        //dropdown
        var els = document.querySelectorAll('[aria-controls]');
        for (var i = 0; i < els.length; i++) {
          var el = els[i];
          el.addEventListener('click', function(e) {
            var targetId = this.getAttribute('aria-controls');
            var target = document.getElementById(targetId);
            //alert
            var isAlert = this.parentElement.getAttribute('role') === 'alert';
            if (isAlert) {
              //remove or hide if we want some animation
              // target.setAttribute("aria-hidden", true);
              target.remove();
              return;
            }
            //dropdown
            var isDropdown = this.getAttribute('aria-haspopup') === 'true';
            if (isDropdown) {
              //trigger
              var isExpanded = this.getAttribute('aria-expanded') === 'true';
              this.setAttribute('aria-expanded', !isExpanded);
              //target
              var targetIsHidden = target.getAttribute('aria-hidden') == 'true';
              target.setAttribute('aria-hidden', isExpanded);
              return;
            }
            //tree
            var isTree = target.getAttribute('role') === 'tree';
            var isTreeItem = target.getAttribute('role') === 'treeitem';
            function setPressed(el, bool) {
              el.setAttribute('aria-pressed', bool);
              if (bool) {
                el.classList.add('is-pressed');
              } else {
                el.classList.remove('is-pressed');
              }
            }
            function setExpanded(el, bool) {
              el.setAttribute('aria-expanded', bool);
              //get group
              var group = el.querySelector('[role=group]');
              group.setAttribute('aria-hidden', !bool);
              if (!bool) {
                group.classList.add('is-hidden');
              } else {
                group.classList.remove('is-hidden');
              }
            }
            var isPressed;
            //handle the primary trigger
            if (isTree || isTreeItem) {
              isPressed = this.getAttribute('aria-pressed') === 'true';
              setPressed(this, !isPressed);
            }
            //toggle a single treeitem
            if (isTreeItem) {
              setExpanded(target, !isPressed);
            }
            //toggle all treeitems
            if (isTree) {
              //all triggers
              var controls = target.querySelectorAll('[aria-controls]');
              for (var i = 0; i < controls.length; i++) {
                var control = controls[i];
                setPressed(control, !isPressed);
                targetId = control.getAttribute('aria-controls');
                target = document.getElementById(targetId);
                setExpanded(target, !isPressed);
              }
            }
          });
        }
      })();
    </script>
  </body>
</html>
